import { App, Checkbox } from 'antd'
import Image from 'next/image'
import { Dispatch, SetStateAction, useState } from 'react'

import arrowNext from '@/assets/images/arrow-next.png'
import styles from '@/pages/entityForm/styles/index.module.less'

interface Props {
  t: any
  setSetup: Dispatch<SetStateAction<number>>
}

export default function About({ t, setSetup }: Props) {
  const { message } = App.useApp()

  const [checked, setChecked] = useState(false)

  const handleNextClick = async () => {
    if (!checked) return message.warning(t['form.about.checkbox.warning'])
    setSetup(2)
  }

  return (
    <div className={styles['form-about']}>
      <h2 className={styles['form-title-h2']}>{t['form.about.title']}</h2>
      <p className={styles['form-about-text']}>{t['form.about.details1']}</p>
      <p className={styles['form-about-text']}>{t['form.about.details2']}</p>
      <p className={styles['form-about-text']}>{t['form.about.details3']}</p>
      <p className={styles['form-about-text']}>{t['form.about.details4']}</p>
      <p className={styles['form-about-text']}>{t['form.about.details5']}</p>

      <h4 className={styles['form-title-h4']}>{t['form.about.expect.title']}</h4>
      <p className={styles['form-about-text']}>{t['form.about.expect.detail']}</p>
      <p className={styles['form-about-text']}>{t['form.about.expect.list1']}</p>
      <p className={styles['form-about-text']}>{t['form.about.expect.list2']}</p>
      <p className={styles['form-about-text']}>{t['form.about.expect.list3']}</p>
      <p className={styles['form-about-text']}>{t['form.about.expect.list4']}</p>
      <p className={styles['form-about-text']}>{t['form.about.expect.list5']}</p>

      <h4 className={styles['form-title-h4']}>{t['form.about.share.title']}</h4>
      <p className={styles['form-about-text']}>{t['form.about.share.list1']}</p>
      <p className={styles['form-about-text']}>{t['form.about.share.list2']}</p>
      <p className={styles['form-about-text']}>{t['form.about.share.list3']}</p>

      <h4 className={styles['form-title-h4']}>{t['form.about.activities.title']}</h4>
      <p className={styles['form-about-text']}>{t['form.about.activities.detail']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list1']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list2']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list3']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list4']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list5']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list6']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list7']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list8']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list9']}</p>
      <p className={styles['form-about-text']}>{t['form.about.activities.list10']}</p>

      <h4 className={styles['form-title-h4']}>{t['form.about.reported.title']}</h4>
      <p className={styles['form-about-text']}>{t['form.about.reported.list1']}</p>
      <p className={styles['form-about-text']}>{t['form.about.reported.list2']}</p>
      <p className={styles['form-about-text']}>{t['form.about.reported.list3']}</p>
      <p className={styles['form-about-text']}>{t['form.about.reported.list4']}</p>
      <p className={styles['form-about-text']}>{t['form.about.reported.list5']}</p>

      <div className={styles['form-about-button']}>
        <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
          {t['form.about.checkbox']}
        </Checkbox>

        <div className={styles['form-button']}>
          <div
            className={checked ? styles['form-button-next'] : styles['form-button-disabled']}
            onClick={() => handleNextClick()}
          >
            <span className={styles['button-text']}>{t['form.button.next']}</span>
            <Image src={arrowNext} className={styles['button-icon']} alt="next" />
          </div>
        </div>
      </div>
    </div>
  )
}
